<template>
  <div class="about" @mousemove="getMousePoint">
    <h1>This is an about page</h1>
    <h2>展示鼠标的坐标</h2>
    <p>x:{{ x }}---y:{{ y }}</p>

    <hr />

    <h2>随机展示一个猫的图片</h2>
    <h3 v-if="loading">Loading......</h3>
    <img v-else :src="dogUrl" width="400" alt="" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
/* 
  import引入文件的时候,并不是把文件内容拿进来执行的,而是让文件先执行,我们拿到这个文件的暴露的值
*/
import MousePoint from "./hooks/useMousePoint";
import ShowDog from "./hooks/useShowDog";
let { x, y, getMousePoint } = MousePoint;
let { loading, dogUrl } = ShowDog;
</script>

<style lang="scss" scoped>
.about {
  height: 500px;
  border: 1px solid #000;
  h1 {
    background-color: yellowgreen;
  }
}
</style>
